import HeaderView from "@/component/Header"
import { useEffect } from "react"
import Lists from "@/component/List"
import style from './index.module.scss'
import { Image } from "antd-mobile"
import { collectType } from "@/type/collect"
import { useNavigate } from "react-router-dom"
import { saveID } from "@/reduxToolkit/reducers/productID"
import { useDispatch } from "react-redux"

const Collect = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  // 初始数据
  const init = () => {}
  useEffect(() => { init() }, [])

  // 跳转详情页
  const goDetail = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
  }

  return (
    <>
     {/* 头部信息 */}
     <HeaderView title="我的收集" backIcon={true}/>
 
     <div className={style.collectBox}>
       <Lists page="collect" getlist={(goodList: []) => {
         return goodList.map((item: collectType) => {
            return (
              <div className={style.item} key={item.goods.id} onClick={() => goDetail(item.goods.id)}>
                <Image src={item.goods.cover_url}/>
                <p className={style.title}>{item.goods.title}</p>
                <p className={style.price}>￥{item.goods.price}</p>
              </div>  
            )
         })
       }}></Lists> 
     </div> 
    </>
  )
}

export default Collect